<template>
  <div class="service-market p-4">
    <!-- 搜索区域 -->
    <div class="search-area mb-4 bg-white p-4 rounded-lg shadow-md">
      <el-form :inline="true" :model="searchForm">
        <el-form-item label="服务名称">
          <el-input
            v-model="searchForm.serviceName"
            placeholder="请输入服务名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="服务类型">
          <el-select v-model="searchForm.serviceType" placeholder="请选择" clearable>
            <el-option label="数据服务" value="data" />
            <el-option label="接口服务" value="api" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <div class="i-carbon-search mr-1"></div>搜索
          </el-button>
          <el-button @click="resetSearch">
            <div class="i-carbon-reset mr-1"></div>重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 服务分类导航 -->
    <div class="category-nav mb-4 bg-white p-4 rounded-lg shadow-md">
      <div class="font-medium mb-2">服务分类</div>
      <el-tabs v-model="activeCategory" @tab-click="handleCategoryChange">
        <el-tab-pane label="全部服务" name="all" />
        <el-tab-pane label="数据中心" name="dataCenter" />
        <el-tab-pane label="教务系统" name="educational" />
        <el-tab-pane label="人事系统" name="hr" />
        <el-tab-pane label="科研系统" name="research" />
      </el-tabs>
    </div>

    <!-- 服务列表 -->
    <div class="service-list">
      <el-row :gutter="20">
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="service in serviceList" :key="service.id" class="mb-4">
          <div class="service-card bg-white p-4 rounded-lg shadow-md h-full">
            <div class="flex items-center mb-4">
              <div class="service-icon mr-3">
                <div :class="service.icon" class="text-2xl" :style="{ color: service.iconColor }"></div>
              </div>
              <div class="flex-1">
                <div class="font-medium text-lg">{{ service.name }}</div>
                <div class="text-gray-500 text-sm">{{ service.type }}</div>
              </div>
            </div>
            <div class="service-desc text-gray-600 mb-4 h-12 line-clamp-2">
              {{ service.description }}
            </div>
            <div class="service-stats flex justify-between text-sm text-gray-500 mb-4">
              <div>调用次数：{{ service.callCount }}</div>
              <div>更新时间：{{ service.updateTime }}</div>
            </div>
            <div class="service-actions flex justify-between items-center">
              <el-tag :type="service.status === 'active' ? 'success' : 'info'">
                {{ service.status === 'active' ? '可用' : '维护中' }}
              </el-tag>
              <div>
                <el-button type="primary" link @click="handleViewDetail(service)">
                  查看详情
                </el-button>
                <el-button type="success" link @click="handleApply(service)">
                  申请使用
                </el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 分页 -->
    <div class="pagination-container flex justify-center mt-4">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :total="total"
        :page-sizes="[12, 24, 36, 48]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <!-- 服务详情弹窗 -->
    <el-dialog
      v-model="dialogVisible.detail"
      title="服务详情"
      width="60%"
    >
      <div class="service-detail">
        <div class="mb-4">
          <h3 class="font-medium mb-2">基本信息</h3>
          <el-descriptions :column="2" border>
            <el-descriptions-item label="服务名称">{{ currentService.name }}</el-descriptions-item>
            <el-descriptions-item label="服务类型">{{ currentService.type }}</el-descriptions-item>
            <el-descriptions-item label="发布时间">{{ currentService.createTime }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ currentService.updateTime }}</el-descriptions-item>
            <el-descriptions-item label="服务描述" :span="2">{{ currentService.description }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="mb-4">
          <h3 class="font-medium mb-2">接口信息</h3>
          <el-descriptions :column="1" border>
            <el-descriptions-item label="接口地址">{{ currentService.apiUrl }}</el-descriptions-item>
            <el-descriptions-item label="请求方式">{{ currentService.method }}</el-descriptions-item>
            <el-descriptions-item label="请求参数">
              <pre class="bg-gray-50 p-2 rounded">{{ currentService.params }}</pre>
            </el-descriptions-item>
            <el-descriptions-item label="返回示例">
              <pre class="bg-gray-50 p-2 rounded">{{ currentService.response }}</pre>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>

    <!-- 申请使用弹窗 -->
    <el-dialog
      v-model="dialogVisible.apply"
      title="申请使用"
      width="50%"
    >
      <el-form :model="applyForm" label-width="100px">
        <el-form-item label="申请原因" required>
          <el-input
            v-model="applyForm.reason"
            type="textarea"
            rows="3"
            placeholder="请输入申请原因"
          />
        </el-form-item>
        <el-form-item label="使用期限" required>
          <el-date-picker
            v-model="applyForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="联系方式" required>
          <el-input v-model="applyForm.contact" placeholder="请输入联系方式" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible.apply = false">取消</el-button>
          <el-button type="primary" @click="handleApplySubmit">提交申请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 搜索表单
const searchForm = reactive({
  serviceName: '',
  serviceType: ''
})

// 分类和分页
const activeCategory = ref('all')
const currentPage = ref(1)
const pageSize = ref(12)
const total = ref(100)

// 弹窗控制
const dialogVisible = reactive({
  detail: false,
  apply: false
})

// 服务列表数据
const serviceList = ref([
  {
    id: 1,
    name: '教师基础信息服务',
    type: '数据服务',
    description: '提供教师基本信息的查询服务，包括工号、姓名、所属院系等信息',
    icon: 'i-carbon-user-profile',
    iconColor: '#409EFF',
    callCount: '1,234',
    updateTime: '2024-01-20',
    status: 'active'
  },
  {
    id: 2,
    name: '学生成绩查询服务',
    type: '接口服务',
    description: '提供学生课程成绩的查询服务，支持按学期、课程等条件筛选',
    icon: 'i-carbon-document-export',
    iconColor: '#67C23A',
    callCount: '2,345',
    updateTime: '2024-01-19',
    status: 'active'
  },
  // ... 更多服务数据
])

// 当前服务详情
const currentService = reactive({
  name: '',
  type: '',
  createTime: '',
  updateTime: '',
  description: '',
  apiUrl: '',
  method: '',
  params: '',
  response: ''
})

// 申请表单
const applyForm = reactive({
  reason: '',
  dateRange: [],
  contact: ''
})

// 搜索处理
const handleSearch = () => {
  // TODO: 实现搜索逻辑
  console.log('搜索条件：', searchForm)
}

// 重置搜索
const resetSearch = () => {
  searchForm.serviceName = ''
  searchForm.serviceType = ''
}

// 分类切换
const handleCategoryChange = (tab: any) => {
  console.log('当前分类：', tab.props.name)
  // TODO: 根据分类加载数据
}

// 分页处理
const handleSizeChange = (val: number) => {
  pageSize.value = val
  // TODO: 重新加载数据
}

const handleCurrentChange = (val: number) => {
  currentPage.value = val
  // TODO: 重新加载数据
}

// 查看详情
const handleViewDetail = (service: any) => {
  Object.assign(currentService, service)
  // TODO: 加载完整的服务详情
  dialogVisible.detail = true
}

// 申请使用
const handleApply = (service: any) => {
  Object.assign(currentService, service)
  dialogVisible.apply = true
}

// 提交申请
const handleApplySubmit = () => {
  // TODO: 实现申请提交逻辑
  ElMessage.success('申请提交成功')
  dialogVisible.apply = false
}
</script>

<style scoped lang="scss">
.service-market {
  .service-card {
    transition: all 0.3s;
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }

  .service-detail {
    pre {
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
  }
}
</style> 